<template>
    <Popover class="popover" placement="bottom-end" v-model:show="show" :offset="[12, 4]">
        <template #reference>
            <Icon class="p-1 hover:bg-zinc-100 rounded">add_circle</Icon>
        </template>
        <div class="font-px select-none m-2">
            <div
                class="flex items-center hover:bg-zinc-100 p-2 rounded-lg"
                @click="$emit('createFile')"
            >
                <Icon>add</Icon>
                <span class="px-2">创建画板</span>
            </div>
        </div>
    </Popover>
</template>

<style scoped>
.popover {
    --van-popover-background-color: #eee;
}
</style>

<script lang="ts" setup>
import Icon from "@konghayao/vue-material-icons";
import { Popover } from "vant";
import { ref } from "vue";
const show = ref(false)

</script>